import { useEffect, useState } from 'react';
import { StyleSheet, TouchableOpacity, Text, View, Switch, ImageBackground, style } from 'react-native';

const SubmitOrder = ({ navigation, route }) => {
    const [isEnabled, setIsEnabled] = useState(true);
    const toggleSwitch = () => setIsEnabled(previousState => !previousState);
    const shopId = route.params.id
    const shopState = route.params.state
    const shopName = route.params.shopName
    useEffect(() => {
        navigation.setOptions({
            title: '提交订单',
        })
    }, [])
    const toPay = () => {
        navigation.navigate('Pay', { id: shopId, state: shopState ,shopName:shopName})
    }
    return (
        <View style={styles.container}>
            <ImageBackground source={require('../img/bgimg.jpg')} style={styles.bgimg}>
                <Text style={styles.text1}>
                    物品租赁合同
                </Text>
                <Text style={styles.text2}>
                    1.甲方应在约定时间内提供合同中的租用物品，如有不可抗拒因素，双方可协商决定。
                </Text>
                <Text style={styles.text2}>
                    2.乙方应按约定如期向甲方支付租用费用。
                </Text>
                <Text style={styles.text2}>
                    3.合同期满，乙方可将物品还甲方，甲方视费用物品折旧情况收取折旧。
                </Text>
                <Text style={styles.text2}>
                    4.本合同最终解释权归甲方所有。
                </Text>
                <View>
                    <Switch
                        style={styles.switch}
                        trackColor={{ true: "#767577", false: "#81b0ff" }}
                        thumbColor={isEnabled ? "#f4f3f4" : "#f5dd4b"}
                        ios_backgroundColor="#3e3e3e"
                        onValueChange={toggleSwitch}
                        value={isEnabled}
                    />
                    <Text style={styles.text3}>我同意</Text>
                </View>
                <TouchableOpacity style={[styles.btnStyle]} >
                    <Text disabled={isEnabled} style={isEnabled ? styles.loginText1 : styles.loginText} onPress={toPay}>去支付</Text>
                </TouchableOpacity>
            </ImageBackground>
        </View>
    );
}
const styles = StyleSheet.create({
    container: {
        height: 600,
    },
    bgimg: {
        width: '100%',
        height: '100%',
        justifyContent: 'space-between',
    },
    text1: {
        width: '80%',
        height: 50,
        marginTop: 10,
        borderColor: '#cacaca',
        paddingLeft: '32%',
        fontSize: 25,
    },
    switch: {
        marginRight: 'auto',
        paddingLeft: 25,
    },
    text2: {
        width: '90%',
        height: 50,
        marginLeft: 'auto',
        marginRight: 'auto',
        marginTop: 10,
        borderColor: '#cacaca',
        paddingLeft: 15,
        fontSize: 18,
    },
    text3: {
        marginRight: 'auto',
        marginTop: -37,
        borderColor: '#cacaca',
        paddingLeft: 75,
        fontSize: 18,
    },
    btnStyle: {
        marginLeft: 'auto',
        marginRight: 'auto',
        height: 35,
        width: '80%',
        marginTop: 20,
        backgroundColor: '#4398ff',
        justifyContent: 'center',
    },
    loginText: {
        textAlign: 'center',
        color: 'white',
        textAlignVertical: 'center',
    },
    loginText1: {
        textAlign: 'center',
        backgroundColor: 'grey',
        height: 35,
        textAlignVertical: 'center',

    },
});
export default SubmitOrder; 